.pe-spin {
    --pe-spin-size: var(--pe-font-size-default);
}

.pe-spin {
    position: relative;
    display: inline-block;

    .pe-spin-mask {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba($color: #ffffff, $alpha: .7);
        display: flex;
        justify-content: center;
        align-items: center;

        .pe-spin-center {
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: var(--pe-spin-size);

            .pe-spin-icon {
                width: var(--pe-spin-size);
                height: var(--pe-spin-size);
                display: inline-flex;
                justify-content: center;
                align-items: center;
            }
        }
    }

    .pe-spin-small {
        --pe-spin-size: var(--pe-font-size-small);
    }

    .pe-spin-large {
        --pe-spin-size: var(--pe-font-size-large);
    }
}